/* Copyright 2020 The TensorFlow Authors. All Rights Reserved.

Licensed under the Apache License, Version 2.0 (the "License");
you may not use this file except in compliance with the License.
You may obtain a copy of the License at

    http://www.apache.org/licenses/LICENSE-2.0

Unless required by applicable law or agreed to in writing, software
distributed under the License is distributed on an "AS IS" BASIS,
WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
See the License for the specific language governing permissions and
limitations under the License.
==============================================================================*/
@import 'tensorboard/webapp/theme/tb_theme';

:host {
  contain: strict;
  display: inline-block;

  .custom-vis {
    // custom-vis shows on top of interactive-view but we still need to give
    // mouse interactions to the interactive-view. Currently, the contract is
    // that you can only supply purely visual UI on top of the line chart.
    pointer-events: none;
  }
}

.container {
  background: inherit;
  display: grid;
  height: 100%;
  overflow: hidden;
  width: 100%;
  grid-template-areas:
    'yaxis series'
    'dot xaxis'
    '. customChartOverlay';
  grid-template-columns: 50px 1fr;
  grid-auto-rows: 1fr 30px 0px;

  // Unlike other Angular components, we may use this component outside
  // of the Angular app and want to control the dark mode styling based on
  // the component prop alone.
  &.dark-mode {
    color: map-get($tb-dark-foreground, text);
  }
  // We does not want to render x-axis and y axis in line only mode. Thus
  // we also removes the spaces the axis take.
  &.line-only-mode {
    grid-template-columns: 0 1fr;
    grid-auto-rows: 1fr 0;
  }
}

.series-view {
  grid-area: series;
  position: relative;
  overflow: hidden;

  .custom-vis,
  canvas,
  svg,
  line-chart-grid-view,
  line-chart-interactive-view {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}

.x-axis,
.y-axis {
  .custom-vis {
    height: 100%;
    left: 0;
    overflow: hidden;
    position: absolute;
    top: 0;
    width: 100%;
    -webkit-mask-image: linear-gradient(
      to right,
      #0000 0%,
      #000 10%,
      #000 90%,
      #0000 100%
    );
    mask-image: linear-gradient(
      to right,
      #0000 0%,
      #000 10%,
      #000 90%,
      #0000 100%
    );
  }

  line-chart-axis {
    height: 100%;
  }
}

.x-axis {
  grid-area: xaxis;
  position: relative;
}

.y-axis {
  grid-area: yaxis;
}

.dot {
  align-items: flex-start;
  display: flex;
  grid-area: dot;
  justify-content: flex-end;

  .rect {
    height: 1px;
    width: 1px;
    background-color: #aaa;
  }
}

.custom-chart-overlay-vis {
  grid-area: customChartOverlay;
  grid-row-end: 2;
  grid-row-start: 1;
}
